<template>
  <div>
    <h1>我的Vue国际化项目</h1>
    <label>请选择语言: </label>
    <label v-for="local in languages">
      <input v-model="locale" :value="local" type="radio">
      {{ local }}
    </label>

    <p>{{ msg }}</p>
    <p>{{ $t('欢迎2') }}</p>
    <p>{{ $t('key.static') }}</p>
    <p>{{ t('key.static2') }}</p>
    <!--<p>{{ tc('key.static3') }}</p>-->

    <i18n path="key.component"></i18n>
    <i18n-t keypath="key.component2"></i18n-t>
    <Translate keypath="key.component3"></Translate>

    <p>{{ d(new Date(), 'long') }}</p>
    <p>{{ n(1000, 'currency') }}</p>

    <button @click="test">测试setup中国际化</button>
  </div>
</template>

<script setup>
import {useI18n} from 'vue-i18n'

const {t, locale, d, n, i18n} = useI18n()

const languages = ['en', 'zh']
const props = defineProps({
  msg: {type: String}
})
const test = () => {
  alert(t("欢迎setup"))
}
</script>